<template>
  <div class="saveto-view view-border column q-pa-sm">
    <div class="hint-string">SAVE TO</div>
    <div class="row justify-center items-center">
      <q-checkbox label="Watch Later" v-model="watchLaterChecked" />
      <q-space />
      <q-icon name="mdi-cloud-lock" size="18px" />
    </div>
    <q-checkbox
      v-for="playlist in playlists"
      :label="playlist.title"
      v-model="playlist.checked"
      :key="playlist.id"
    />
    <q-separator />
    <q-btn
      label="Create New Playlist"
      flat
      style="font-size: 12px"
      no-caps
      dense
    >
      <q-popup-edit
        ref="newPopupEdit"
        v-model="newPlaylistName"
        auto-save
        v-slot="scope"
      >
        <q-input
          v-model="scope.value"
          dense
          autofocus
          @keyup.enter="createPlaylist(scope)"
        />
      </q-popup-edit>
    </q-btn>
  </div>
</template>
<script setup lang="ts">
import { QPopupEdit } from 'quasar';
import { useUserStore } from 'src/stores/user-store';
import { ref, computed, onMounted } from 'vue';
const userStore = useUserStore();
const currentUser = computed(() => userStore.currentUser);
const playlists = computed(() => userStore.myPlaylists);
const watchLaterChecked = ref(false);
const newPopupEdit = ref<QPopupEdit>();
const newPlaylistName = ref('');
onMounted(async () => {
  if (currentUser.value) {
    await userStore.getMyPlaylists({ page: 0, size: 10 });
  }
});
async function createPlaylist(scope: any) {
  scope.set();
  newPopupEdit.value?.hide();
  if (currentUser.value) {
    await userStore.createPlaylist(newPlaylistName.value);
  }
}
</script>
<style lang="sass" scoped>
.saveto-view
  width: 250px
.view-border
  border: 1px solid #404040
  border-radius: 6px
  background-color: rgba(35,35,35,1)
  padding: 12px 12px 6px 12px

.hint-string
  font-size: 12px
  fonts-weight: bold
  color: $sub
</style>
